<template>
  <div class="flip-panel-warp">
    <div class="flip">
      <div class="front">
        正
      </div>
      <div class="back">
        反
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlipPanel'
}
</script>

<style scoped>
  .flip-panel-warp{
    display: block;
    background: #9d9d9d;
    box-shadow: 1px 1px 5px black;
    border-radius: 4px;
    width: 60px;
    height: 80px;
  }
  .flip{
    position: relative;
    width: 60px;
    height: 80px;
    transition: all 0.6s;
    perspective: 100px;
    transform-style:preserve-3d;
  }
  .front,.back{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f2f2f2;
    width: 60px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 40px;
    transition: all 0.6s;
    transform: rotateX(0);
    backface-visibility: hidden; /*隐藏背面*/
    border-radius: 4px;
  }
  .back{
    transform: rotateX(180deg);
  }
  .flip-panel-warp:hover .front{
    transform: rotateX(-180deg);
  }
  .flip-panel-warp:hover .back{
    transform: rotateX(0deg);
  }
</style>
